<template>
  <el-card v-loading="loading">
    <el-col>
      <el-button size="small" type="primary" @click="updateForm()">{{ $t('save') }}</el-button>
      <el-button size="small" @click="closeTab()">{{ $t('close') }}</el-button>
    </el-col>
    <el-col :span="24" :style="'margin-top: 10px;'">
      <fm-making-form
        ref="makingform"
        style="height: 550px;"
        preview>
        <template slot="action">
        </template>
      </fm-making-form>
    </el-col>
  </el-card>
</template>

<script>
import debounce from 'lodash/debounce'
import URLUtil from '@/utils/url'
export default {
  data () {
    return {
      timestamp: null,
      loading: false,
      id: null
    }
  },
  created () {
    // 读取url?后参数
    let params = URLUtil.getURLParams()
    if (params.id) {
      this.id = params.id
      this.loading = true
      this.getInfo()
    }
  },
  methods: {
    // 获取信息
    getInfo () {
      this.$http.get(`/drs/drsFormDef/${this.id}`).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return false
        }
        if (res.data.formContent) {
          this.$refs.makingform.setJSON(res.data.formContentObj)
        }
      }).catch(() => {})
    },
    // 关闭 tab
    closeTab () {
      window.close()
    },
    // 表单提交
    updateForm: debounce(function () {
      this.loading = true
      console.log(this.$refs.makingform.getJSON())
      this.$http['put']('/drs/drsFormDef/',
        {
          id: this.id,
          formContentObj: this.$refs.makingform.getJSON()
        }
      ).then(({ data: res }) => {
        this.loading = false
        if (res.code !== 0) {
          return false
        }
        this.$message({
          message: this.$t('prompt.success'),
          type: 'success',
          duration: 500,
          onClose: () => {
            this.closeTab()
          }
        })
      })
    }, 1000, { 'leading': true, 'trailing': false })
  }
}
</script>
